<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="main.css">
	<style>
		.middle {
			padding: 15px;
		}

		.online {
			margin-left: 15px;
			margin-right: 15px;
		}
	</style>
<body>
	<div class="container">
		<div class="row middle">
			<div class="col-md-3  bg-primary">
						nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server, originally written by Igor Sysoev. For a long time, it has been running on many heavily loaded Russian sites including Yandex, Mail.Ru, VK, and Rambler. According to Netcraft, nginx served or proxied 24.86% busiest sites in July 2018. Here are some of the success stories: Dropbox,Wordpress.com
			</div>
			<div class="col-md-3 bg-success">
				 nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server, originally written by Igor Sysoev. For a long time, it has been running on many heavily loaded Russian sites including Yandex, Mail.Ru, VK, and Rambler. According to Netcraft, nginx served or proxied 24.86% busiest sites in July 2018. Here are some of the success stories: Dropbox, Netflix, Wordpress.com, FastMail.FM.
				
			</div>
			<div class="col-md-3 bg-info">
				 nx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server, originally written by Igor Sysoev. For a long time, it has been running on many heavily loaded Russian sites including Yandex, Mail.Ru, VK, and Rambler. According to Netcraft, nginx served or proxied 24.86% busiest sites in July 2018. Here are some of the success stories: Dropbox, Netflix, Wordpress.com, FastMail.FM.
			</div>
			<div class="col-md-3 bg-warning">
				 nginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server, originally written by Igor Sysoev. For a long time, it has been running on many heavily loaded Russian sites including Yandex, Mail.Ru, VK, and Rambler. According to Netcraft, nginx served or proxied 24.86% busiest sites in July 2018. Here are some of the success stories: Dropbox, Netflix, Wordpress.com, FastMail.FM.
			</div>
		</div>

		<div class="row bg-danger">
			 ginx [engine x] is an HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server, originally written by Igor Sysoev. For a long time, it has been running on many heavily loaded Russian sites including Yandex, Mail.Ru, VK, and Rambler. According to Netcraft, nginx served or proxied 24.86% busiest sites in July 2018. Here are some of the success stories: Dropbox, Netflix, Wordpress.com, FastMail.FM.
		</div>



		<div class="row  middle">

			<div class="col-md-6 col-md-offset-3">
				<table class="table table-bordered table-striped table-hover table-condensed">
				  <tr class="success">
				    <th>Month</th>
				    <th>Savings</th>
				    <th>3</th>
				  </tr>
				  <tr class="danger">
				    <td>January</td>
				    <td>$100</td>
				    <td>$100</td>
				  </tr>
				  <tr class="danger">
				    <td>January</td>
				    <td>$100</td>
				    <td>$100</td>
				  </tr>
				</table>
			</div>

			<table class="table table-bordered table-striped table-hover table-condensed">
				  <thead>
				    <tr class="success">
				      <th>Month</th>
				      <th>Savings</th>
				    </tr>
				  </thead>

				  <tfoot>
				    <tr class="danger">
				      <td>Sum</td>
				      <td>$180</td>
				    </tr>
				  </tfoot>

				  <tbody>
				    <tr class="danger">
				      <td>January</td>
				      <td>$100</td>
				    </tr>
				    <tr class="danger">
				      <td>February</td>
				      <td>$80</td>
				    </tr>
				  </tbody>
			</table>


			<div class="progress">
			  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
			    <span class="sr-only">60% Complete</span>
			  </div>
			</div>
		</div>

		<div class="row  middle">
			<div class="col-md-3 col-md-offset-4">
				<form>
				  <div class="form-group">
				    <label>Email address</label>
				    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
				  </div>
				  <div class="form-group">
				    <label>Password</label>
				    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
				  </div>
				  <div class="form-group">
				    <label>File input</label>
				    <input type="file" id="exampleInputFile">
				    <p>Example block-level help text here.</p>
				  </div>
				  <div class="checkbox">
				    <label>
				      <input type="checkbox"> Check me out
				    </label>
				  </div>
				  <button type="submit" class="btn btn-prime">Submit</button>
				</form>			
			</div>
		</div>


		<div class="row  middle">
			<div class="col-md-4 col-md-offset-4">
				<form>
					<label>
						<input type="text" class="form-control"  placeholder="email">
					</label>
					<label>	
						<textarea class="form-control" rows="3"></textarea>
					</label>
					<br>
					<div class="checkbox">
						<label>	
							<input type="checkbox" name="">北京
						</label>						
					</div>
					<div class="checkbox">
						<label>	
							<input type="checkbox" name="">上海
						</label>						
					</div>
					<div class="checkbox">
						<label>	
							<input type="checkbox" name="">深圳
						</label>						
					</div>
					<div class="checkbox">
						<label>	
							<input type="checkbox" name="">杭州
						</label>						
					</div>
				</form>


				<form>
					<div class="radio">
						<label>	
							<input type="radio" name="optionsRadios">北京
						</label>						
					</div>
					<div class="radio">
						<label>	
							<input type="radio" name="optionsRadios">上海
						</label>						
					</div>
					<div class="radio">
						<label>	
							<input type="radio" name="optionsRadios">深圳
						</label>						
					</div>
					<div class="radio">
						<label>	
							<input type="radio" name="optionsRadios">杭州
						</label>						
					</div>
				</form>



			</div>
		</div>


		<div class="row  middle">
			<div class="col-md-4 col-md-offset-4">
					<div class="middle">
						<button type="button" class="btn btn-default">（默认样式）Default</button>
					</div>
					<div class="middle">
						<button type="button" class="btn btn-primary">（首选项）Primary</button>
					</div>
					<div class="middle">
						<button type="button" class="btn btn-success">（成功）Success</button>
					</div>
					<div class="middle">
						<button type="button" class="btn btn-info">（一般信息）Info</button>
					</div>
					<div class="middle">
						<button type="button" class="btn btn-warning">（警告）Warning</button>
					</div>
					<div class="middle">
						<button type="button" class="btn btn-danger">（危险）Danger</button>
					</div>
					<div class="middle">
						<button type="button" class="btn btn-link">（链接）Link</button>
					</div>					
			</div>
		</div>

		<div class="row  middle">
			<div class="col-md-12 col-md-offset-1">
				<div style="display: inline-flex;">
					<div class="online">
						<img src="https://v3.bootcss.com/assets/img/tanzhouedu.jpg" alt="..." class="img-rounded">
					</div>
					<div class="online">
						<img src="https://v3.bootcss.com/assets/img/tanzhouedu.jpg" alt="..." class="img-circle">
					</div>
					<div class="online">
						<img src="https://v3.bootcss.com/assets/img/tanzhouedu.jpg" alt="..." class="img-thumbnail">
					</div>
				</div>		
			</div>
		</div>


	</div>
</body>
</html>


